<template>
  <div id="left_app">
    <h1>优就业</h1>
    <ul class="nav">
      <li class="nav-item" @click="change('Index')">首页展板</li>
      <li class="nav-item" @click="change('Lessons1')">课程管理</li>
      <li class="nav-item" @click="change('Grade')">班级管理</li>
      <li class="nav-item" @click="change('examination')">考试管理</li>
      <li class="nav-item" @click="change('Teacher')">师资管理</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world",
    };
  },
  methods: {
    change(t) {
      this.$emit("sendData", t);
    },
  },
};
</script>

<style scoped>
#left_app > h1 {
  color: white;
  line-height: 58px;
  text-align: center;
  background-color: #4d678d;
}
#left_app .nav {
  padding-top: 50px;
}
#left_app .nav-item {
  height: 70px;
  font-size: 24px;
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 70px;
  cursor: pointer;
}
#left_app .nav-item:hover {
  background: rgb(4, 108, 139);
}
#left_apps .nav-item:hover {
  background-color: #3b3e4d;
}
.active {
  background: rgb(4, 108, 139);
}
</style>